//碳足迹计算
<template>
  <a-layout>
    <a-layout-content style="padding: 5px">
      <!-- 新增供应商按钮 -->

      <!-- 供应商列表 -->
      <a-card title="供应商列表">
        <a-button type="primary" @click="addSupplier" style="margin-bottom: 10px"
          >新增供应商</a-button
        >
        <a-table :columns="columns" :dataSource="suppliers" rowKey="id" bordered>
          <template #action="{ record }">
            <a type="link" @click="selectSupplier(record)">选择</a>
            <a-divider type="vertical" />
            <a type="link" danger @click="deleteSupplier(record)">删除</a>
          </template>
        </a-table>
      </a-card>

      <!-- 数据录入板块 -->
      <a-modal v-model:open="open" title="1" @ok="handleok">
        <a-card
          v-if="selectedSupplier"
          title="数据录入 - {{ selectedSupplier.name }}"
          bordered="{false}"
          style="margin-top: 20px"
        >
          <!-- 原材料供应表单 -->
          <div v-if="selectedSupplier && selectedSupplier.type === '原材料供应'">
            <h3>原材料供应</h3>
            <a-form layout="vertical">
              <a-form-item label="材料名称">
                <a-input v-model="materialData.name" placeholder="请输入材料名称" />
              </a-form-item>
              <a-form-item label="能源类型">
                <a-select v-model="materialData.energyType" placeholder="请选择能源类型">
                  <a-select-option value="电力">电力</a-select-option>
                  <a-select-option value="天然气">天然气</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="使用量 (kWh, m³等)">
                <a-input v-model="materialData.usage" placeholder="请输入使用量" />
              </a-form-item>
              <a-form-item label="排放因子 (kg CO2e/单位)">
                <a-input
                  v-model="materialData.emissionFactor"
                  placeholder="请输入排放因子"
                />
              </a-form-item>
              <h3>运输</h3>
              <a-form-item label="运输方式">
                <a-select
                  v-model="materialData.transportType"
                  placeholder="请选择运输方式"
                >
                  <a-select-option value="卡车">卡车</a-select-option>
                  <a-select-option value="船舶">船舶</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="运输距离 (公里)">
                <a-input v-model="materialData.distance" placeholder="请输入运输距离" />
              </a-form-item>
              <a-form-item label="运输量 (吨)">
                <a-input v-model="materialData.weight" placeholder="请输入运输量" />
              </a-form-item>
              <a-form-item label="排放因子 (kg CO2e/吨公里)">
                <a-input
                  v-model="materialData.transportEmissionFactor"
                  placeholder="请输入排放因子"
                />
              </a-form-item>
            </a-form>
          </div>

          <!-- 产品组装表单 -->
          <div v-if="selectedSupplier && selectedSupplier.type === '产品组装'">
            <h3>产品组装</h3>
            <a-form layout="vertical">
              <a-form-item label="能源类型">
                <a-select v-model="assemblyData.energyType" placeholder="请选择能源类型">
                  <a-select-option value="电力">电力</a-select-option>
                  <a-select-option value="天然气">天然气</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="使用量 (kWh, m³等)">
                <a-input v-model="assemblyData.usage" placeholder="请输入使用量" />
              </a-form-item>
              <a-form-item label="排放因子 (kg CO2e/单位)">
                <a-input
                  v-model="assemblyData.emissionFactor"
                  placeholder="请输入排放因子"
                />
              </a-form-item>
              <h3>加工</h3>
              <a-form-item label="工艺类型">
                <a-input
                  v-model="assemblyData.processType"
                  placeholder="请输入工艺类型"
                />
              </a-form-item>
              <a-form-item label="使用量 (kg, L等)">
                <a-input
                  v-model="assemblyData.materialUsage"
                  placeholder="请输入使用量"
                />
              </a-form-item>
              <a-form-item label="排放因子 (kg CO2e/单位)">
                <a-input
                  v-model="assemblyData.processEmissionFactor"
                  placeholder="请输入排放因子"
                />
              </a-form-item>
            </a-form>
          </div>

          <!-- 产品分销表单 -->
          <div v-if="selectedSupplier && selectedSupplier.type === '产品分销'">
            <h3>产品分销</h3>
            <a-form layout="vertical">
              <a-form-item label="运输方式">
                <a-select
                  v-model="distributionData.transportType"
                  placeholder="请选择运输方式"
                >
                  <a-select-option value="卡车">卡车</a-select-option>
                  <a-select-option value="船舶">船舶</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="运输距离 (公里)">
                <a-input
                  v-model="distributionData.distance"
                  placeholder="请输入运输距离"
                />
              </a-form-item>
              <a-form-item label="运输量 (吨)">
                <a-input v-model="distributionData.weight" placeholder="请输入运输量" />
              </a-form-item>
              <a-form-item label="排放因子 (kg CO2e/吨公里)">
                <a-input
                  v-model="distributionData.transportEmissionFactor"
                  placeholder="请输入排放因子"
                />
              </a-form-item>
            </a-form>
          </div>

          <a-button type="primary" @click="addDataSection" style="margin-top: 20px"
            >新增供应商数据板块</a-button
          >
        </a-card>
      </a-modal>

      <!-- 计算按钮 -->
      <a-button type="primary" @click="calculateCarbonFootprint" style="margin-top: 20px"
        >计算碳足迹</a-button
      >

      <!-- 计算结果展示 -->
      <a-card
        title="碳足迹计算结果"
        bordered="{false}"
        style="margin-top: 20px"
        v-if="calculated"
      >
        <p><strong>总碳排放量：</strong>{{ totalCarbonFootprint }} kg CO2e</p>
        <h3>追溯链条</h3>
        <ul>
          <li v-if="selectedSupplier && selectedSupplier.type === '原材料供应'">
            原材料供应碳排放: {{ materialData.footprint }} kg CO2e
          </li>
          <li v-if="selectedSupplier && selectedSupplier.type === '产品组装'">
            产品组装碳排放: {{ assemblyData.footprint }} kg CO2e
          </li>
          <li v-if="selectedSupplier && selectedSupplier.type === '产品分销'">
            产品分销碳排放: {{ distributionData.footprint }} kg CO2e
          </li>
        </ul>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { ref } from "vue";

// 供应商数据
const suppliers = ref([
  {
    key: "1",
    name: "供应商A",
    type: "类型1",
  },
  {
    key: "2",
    name: "供应商B",
    type: "类型2",
  },
  {
    key: "3",
    name: "供应商C",
    type: "类型1",
  },
  {
    key: "1",
    name: "供应商A",
    type: "类型1",
  },
  {
    key: "2",
    name: "供应商B",
    type: "类型2",
  },
  {
    key: "3",
    name: "供应商C",
    type: "类型1",
  },
  {
    key: "1",
    name: "供应商A",
    type: "类型1",
  },
  {
    key: "2",
    name: "供应商B",
    type: "类型2",
  },
  {
    key: "3",
    name: "供应商C",
    type: "类型1",
  },
  {
    key: "1",
    name: "供应商A",
    type: "类型1",
  },
  {
    key: "2",
    name: "供应商B",
    type: "类型2",
  },
  {
    key: "3",
    name: "供应商C",
    type: "类型1",
  },
  {
    key: "1",
    name: "供应商A",
    type: "类型1",
  },
  {
    key: "2",
    name: "供应商B",
    type: "类型2",
  },
  {
    key: "3",
    name: "供应商C",
    type: "类型1",
  },
  {
    key: "1",
    name: "供应商A",
    type: "类型1",
  },
  {
    key: "2",
    name: "供应商B",
    type: "类型2",
  },
  {
    key: "3",
    name: "供应商C",
    type: "类型1",
  },
  {
    key: "1",
    name: "供应商A",
    type: "类型1",
  },
  {
    key: "2",
    name: "供应商B",
    type: "类型2",
  },
  {
    key: "3",
    name: "供应商C",
    type: "类型1",
  },
  {
    key: "1",
    name: "供应商A",
    type: "类型1",
  },
  {
    key: "2",
    name: "供应商B",
    type: "类型2",
  },
  {
    key: "3",
    name: "供应商C",
    type: "类型1",
  },
  {
    key: "1",
    name: "供应商A",
    type: "类型1",
  },
  {
    key: "2",
    name: "供应商B",
    type: "类型2",
  },
  {
    key: "3",
    name: "供应商C",
    type: "类型1",
  },
  {
    key: "1",
    name: "供应商A",
    type: "类型1",
  },
  {
    key: "2",
    name: "供应商B",
    type: "类型2",
  },
  {
    key: "3",
    name: "供应商C",
    type: "类型1",
  },
]);
const selectedSupplier = ref(null);
const open = ref(false);
// 表格列配置
const columns = [
  { title: "供应商名称", dataIndex: "name", key: "name" },
  { title: "供应商类型", dataIndex: "type", key: "type" },
  { title: "操作", key: "action", slots: { customRender: "action" } },
];

// 数据录入板块数据
const materialData = ref({
  name: "",
  energyType: "",
  usage: null,
  emissionFactor: null,
  transportType: "",
  distance: null,
  weight: null,
  transportEmissionFactor: null,
  footprint: null,
});

const assemblyData = ref({
  energyType: "",
  usage: null,
  emissionFactor: null,
  processType: "",
  materialUsage: null,
  processEmissionFactor: null,
  footprint: null,
});

const distributionData = ref({
  transportType: "",
  distance: null,
  weight: null,
  transportEmissionFactor: null,
  footprint: null,
});

// 计算结果
const totalCarbonFootprint = ref(0);
const calculated = ref(false);
const handleok = () => {
  console.log(e);
  open.value = false;
};
// 新增供应商
const addSupplier = () => {
  open.value = true;
  const newSupplier = {
    id: Date.now(),
    name: `供应商${suppliers.value.length + 1}`,
    type:
      suppliers.value.length % 2 === 0
        ? "原材料供应"
        : suppliers.value.length % 3 === 0
        ? "产品分销"
        : "产品组装",
  };
  suppliers.value.push(newSupplier);
  // 自动选择新增的供应商
  selectedSupplier.value = newSupplier;
};

// 删除供应商
const deleteSupplier = (record) => {
  suppliers.value = suppliers.value.filter((supplier) => supplier.id !== record.id);
};
// 选择供应商
const selectSupplier = (record) => {
  selectedSupplier.value = record;
};

// 计算碳足迹
const calculateCarbonFootprint = () => {
  if (selectedSupplier.value && selectedSupplier.value.type === "原材料供应") {
    materialData.value.footprint =
      materialData.value.usage * materialData.value.emissionFactor +
      materialData.value.distance *
        materialData.value.weight *
        materialData.value.transportEmissionFactor;
  } else if (selectedSupplier.value && selectedSupplier.value.type === "产品组装") {
    assemblyData.value.footprint =
      assemblyData.value.usage * assemblyData.value.emissionFactor +
      assemblyData.value.materialUsage * assemblyData.value.processEmissionFactor;
  } else if (selectedSupplier.value && selectedSupplier.value.type === "产品分销") {
    distributionData.value.footprint =
      distributionData.value.distance *
      distributionData.value.weight *
      distributionData.value.transportEmissionFactor;
  }

  totalCarbonFootprint.value =
    materialData.value.footprint +
    assemblyData.value.footprint +
    distributionData.value.footprint;

  calculated.value = true;
};

// 新增数据板块（此功能可根据需求扩展）
const addDataSection = () => {
  console.log("新增供应商数据板块");
};
</script>

<style scoped>
a-layout {
  background: #f0f2f5;
}

a-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

a-button {
  margin-top: 16px;
}
</style>
